<template>
  <div>
    <ZgDialog
      v-model="visible"
      title="导入数据库的表"
      top="10%"
      width="90%"
      :showFooter="false"
    >
      <div style="margin-bottom: 16px; display: flex; align-items: center;">
        <a-input
          v-model="searchStr"
          placeholder="请输入关键字"
          style="width: 240px; margin-right: 8px;"
          @keyup.enter.native="onSearch"
        />
        <a-button type="primary" @click="onSearch">搜索</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="filteredData"
        :pagination="false"
        rowKey="ROW_ID"
        :row-selection="rowSelection"
      />
      <div class="flx-e mt10">
        <a-pagination
          :current="page"
          :pageSize="pageSize"
          :total="total"
          showSizeChanger
          showQuickJumper
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
          :showTotal="total => `总共 ${total} 条记录`"
        />
      </div>
      <div class="flx-e mt10">
        <a-button type="primary" @click="handleSubmit">提交</a-button>
      </div>
    </ZgDialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      searchStr: '',
      columns: [
        { title: '表名', dataIndex: 'TABLE_NAME' },
        { title: '表描述', dataIndex: 'COMMENTS' }
      ],
      filteredData: [],
      visible: false,
      page: 1,
      pageSize: 10,
      total: 0,
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  computed: {
    rowSelection () {
      return {
        type: 'radio',
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    }
  },
  methods: {
    onSearch () {
      const param = {
        page: this.page,
        pageSize: this.pageSize,
        tableName: this.searchStr
      }
      this.$http.post('/zg-autoform/form/pageTable', param, data => {
        this.filteredData = data.records || []
        this.page = parseInt(data.current) || 1
        this.pageSize = parseInt(data.size) || 10
        this.total = parseInt(data.total) || 0
        // 清空选择
        this.selectedRowKeys = []
        this.selectedRows = []
      })
    },
    onPageChange (page) {
      this.page = page
      this.onSearch()
    },
    onPageSizeChange (current, size) {
      this.pageSize = size
      this.page = 1
      this.onSearch()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleSubmit () {
      const selected = this.selectedRows[0]
      if (!selected) {
        this.$message.warning('请先选择一行数据')
        return
      }
      const tableName = selected.TABLE_NAME

      this.$http.get('/zg-autoform/form/getByCode', { code: tableName }, res => {
        const submitRequest = () => {
          this.$http.get('/zg-autoform/form/importTable', { tableName }, res => {
            this.$message.success('提交成功')
            this.selectedRowKeys = []
            this.selectedRows = []
            this.visible = false
            this.$emit('ok')
          })
        }

        if (res) {
          this.confirm(
            submitRequest,
            '该表已存在，是否继续提交？'
          )
        } else {
          submitRequest()
        }
      })
    },
    open () {
      this.visible = true
      this.onSearch()
    },
    save () {
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
